<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="/assets/css/layui.css" media="all">
</head>
<body>
<fieldset class="layui-elem-field site-demo-button">
        <button class="layui-btn layui-btn-small"><i class="layui-icon"><a href="/user/getUserAdd"><font color="#f0e68c">新增</font></a></i></button>
</fieldset>
<table class="layui-table" lay-data="{height:783, url:'/user/getUserInfoList/', page:true, id:'user'}" lay-filter="test">
    <thead>
    <tr>
        <th lay-data="{field:'username', width:380}">用户名</th>
        <th lay-data="{field:'sex', width:180}">性别</th>
        <th lay-data="{field:'phone', width:200, sort: true}">电话</th>
        <th lay-data="{field:'email', width:225}">邮箱</th>
        <th lay-data="{field:'created', width:245}">注册日期</th>
        <th lay-data="{field:'updated', width:245}">更新日期</th>
        <th lay-data="{fixed: 'right', width:210, align:'center', toolbar: '#barDemo'}"></th>
    </tr>
    </thead>
</table>

<script src="/assets/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            console.log(data);
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'detail'){ //查看
                //do somehing
                window.location.href="/user/getUserInfoList";
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么?', function(index){
                    window.location.href="/user/deleteById?id="+data.id;
                    obj.del(); //删除对应行（tr）的DOM结构!
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                window.location.href="/user/getUserEdit?id="+data.id;
                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
        });
    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>

<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
        var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
        layer = layui.layer //弹层
            ,table = layui.table //表格
            ,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element; //元素操作

        //将日期直接嵌套在指定容器中
        var dateIns = laydate.render({
            elem: '#laydateDemo'
            ,position: 'static'
            ,calendar: true //是否开启公历重要节日
            ,mark: { //标记重要日子
                '0-9-1': '开学'
                ,'2017-9-15': ''
                ,'2017-9-16': ''
            }
            ,done: function(value, date, endDate){
                if(date.year == 2017 && date.month == 9 && date.date == 15){
                    dateIns.hint('明天不上班');
                }
            }
            ,change: function(value, date, endDate){
                layer.msg(value)
            }
        });

        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            ,count: 100 //总页数
            ,skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            ,jump: function(obj, first){
                if(!first){
                    layer.msg('第'+ obj.curr +'页');
                }
            }
        });

        //上传
        upload.render({
            elem: '#uploadDemo'
            ,url: '' //上传接口
            ,done: function(res){
                console.log(res)
            }
        });
    });
</script>


</body>
</html>
